<template>
    <div>
        <div style="margin: 10px 0 ">
            <el-input style="width: 200px" placeholder="请输入电话号查询" suffix-icon="el-icon-search" v-model="phone"></el-input>
            <el-input style="width: 200px" placeholder="请输入订单号查询" suffix-icon="el-icon-message" class="ml-5" v-model="id"></el-input>
            <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
        </div>
        <div style="margin: 10px 0 ">
            <el-button type="primary"@click="save" v-if="role ==='ROLE_ADMIN'">新增<i class="el-icon-circle-plus-outline"></i></el-button>
            <el-popconfirm

                    confirm-button-text='好的'
                    cancel-button-text='不用了'
                    icon="el-icon-info"
                    icon-color="red"
                    title="这是一段内容确定删除吗？"
                    @confirm="del2"
            >
                <el-button class="ml-5 mr-5" type="danger" slot="reference" v-if="role === 'ROLE_ADMIN'">批量删除<i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>
        </div>
        <el-table :data="tableData" header-cell-class-name="headerBg" @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column  prop="id" label="订单号"   width="80" >
            </el-table-column>
            <el-table-column prop="name" label="物品名称" width="140">
            </el-table-column>
            <el-table-column prop="sender" label="发件人" width="140">
        </el-table-column>
            <el-table-column prop="addressee" label="收件人" width="120">
            </el-table-column>

            <el-table-column prop="price" label="价格" width="120">
            </el-table-column>
            <el-table-column prop="addtime" label="购买时间" >
            </el-table-column>
            <el-table-column >
                <template slot-scope="scope" >
<!--                    v-if="(role === 'ROLE_USER')||(role ==='ROLE_BUSINESS')"-->
                    <el-button type="success" @click="changeState" >{{state}}<i class="ml-5 el-icon-edit"></i></el-button>
                    <el-popconfirm
                            confirm-button-text='好的'
                            cancel-button-text='不用了'
                            icon="el-icon-info"
                            icon-color="red"
                            title="确定要退货吗？"
                            @confirm="del(scope.row.id)"
                    >
                        <el-button class="ml-5" type="danger" slot="reference" >退货<i class="el-icon-remove-outline"></i></el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <div style="padding: 10px 0 ">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 5, 10, 15]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <!-- Form -->
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="form" label-width="80px" >
                <el-form-item label="物品名称" >
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item  label="发件人" >
                    <el-input v-model="form.sender" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item  label="收件人" >
                    <el-input v-model="form.addressee" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item  label="电话" >
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="savaFalse">取 消</el-button>
                <el-button type="primary" @click="saveTure">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import request from "@/utils/request";
    export default {
        name: "User.vue",
        data(){
            return{
                role: this.role=JSON.parse(localStorage.getItem("user")).role,
                state:"确认收货",
                pageNum:1,
                pageSize:2,
                tableData:[],
                total:0,

                dialogFormVisible:false,
                form:{

                },
                multipleSelection:[],
                phone:"",
                id:"",
                roles:[],
            }
        },
        created() {
            this.load()
        },
        methods:{
            changeState(){
                this.state="已收货"
            },
            load(){
                request.get("/upackage/page",{
                    params:{
                        pageNum:this.pageNum,
                        pageSize:this.pageSize,
                        phone:this.phone,
                        id:this.id,
                    }
                }).then(res=>{
                    this.tableData=res.records
                    console.log(res.records)
                    this.total=res.total
                })
                // fetch("http://localhost:9999/user/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize+"&username="+this.username).then(res=>res.json()).then(res=>{
                //   this.tableData=res.data
                //   this.total=res.total
                // })
request.get("/role").then(res=>{
    console.log(res)
    this.roles=res
})
            },
            handleSizeChange(pageSize){
                this.pageSize=pageSize
                this.load()
            },
            handleCurrentChange(pageNum){
                this.pageNum=pageNum
                this.load()
            },
            save(){
                this.dialogFormVisible = true
                this.form={}
            },
            saveTure(){
                request.post("/upackage",this.form).then(res=>{
                    if(res){
                        this.$message.success("保存成功")
                        this.dialogFormVisible=false
                        this.load()
                    }
                    else {
                        this.$message.error("保存失败")
                        this.dialogFormVisible=false
                        this.load()
                    }

                })
            },
            savaFalse(){
                this.dialogFormVisible=false
                this.form={}
            },
            edit(row){
                this.form=row
                this.dialogFormVisible=true
            },

del(id){
    request.delete("/upackage/"+id).then(res=>{
        if(res){
            this.$message.success("删除成功")

            this.load()
        }
        else {
            this.$message.error("删除失败")

            this.load()
        }
    })
},
            handleSelectionChange(val){
                this.multipleSelection=val
            },

del2(){
           let ids = this.multipleSelection.map(item=>item.id)

    request.post("/user/batch",ids).then(res=>{
        if(res){
            this.$message.success("批量删除成功")
// if(!this.tableData){
//     thie.pageNum=thie.pageNum-1
// }

            this.load()
        }
        else {
            this.$message.error("批量删除失败")

            this.load()
        }

    })
},
            reset(){
                this.username=""
                this.email=""
                this.address=""
                this.load()
            },
            exp(){
                window.open("http://localhost:9999/user/export")
            },
            handleExcelImportSuccess() {
                this.$message.success("导入成功")
                this.load()
            }

        }
    }

</script>

<style scoped>

</style>